<template>
	<div>
		<div style="border: 1px solid #ccc; margin: 10rpx 20rpx;border-radius: 20rpx;padding-bottom: 20rpx;">
			<div style="text-align: center;margin-bottom: 20rpx;">
				<h2 style="line-height: 80rpx;">{{ workName }}</h2>
			</div>
			<div style="padding-left: 10px;" v-if="testDetail && testDetail.remark">
				作业说明: {{ testDetail && testDetail.remark }}
			</div>
			<div class="exam-list">
				<div class="exam-item" v-for="(item, index) in testPreview" :key="item.id">
					<div class="exam-item-line">
						<div class="exam-item-left">{{ index + 1 }}.</div>
						<div class="exam-item-right">
							<span v-if="item.type == 1">(单选题)</span>
							<span v-if="item.type == 2">(多选题)</span>
							<span v-if="item.type == 3">(判断题)</span>
							<span>
								{{ item.title }}
							</span>
						</div>
					</div>
					<div class="exam-item-line" v-if="item.type == 1 || item.type == 2">
						<div class="exam-item-left">选项:</div>
						<div class="exam-item-right">
							<div style="display: flex;" v-for="(opt, idx) in item.choose" :key="idx">
								<div>{{ xuanxiang[idx] }}:</div>
								<div style="margin-left: 10rpx;">{{ opt }}</div>
							</div>
						</div>
					</div>
					<div class="exam-item-line">
						<div class="exam-item-left">答案:</div>
						<div class="exam-item-right">
							<template v-if="item.type == 1" >
								<span :style="!item.isTrue ? 'color: red;' : 'color: green;'">{{ xuanxiang[item.stuAnswer - 1] }}</span>
							</template>
							
							<template v-if="item.type == 2" >
								<span :style="!item.isTrue ? 'color: red;' : 'color: green;'" v-for="answer in item.stuAnswer">{{ xuanxiang[answer - 1] }}</span>
							</template>
							
							<template v-if="item.type == 3" >
								<template v-if="item.stuAnswer && item.stuAnswer.length !== 0">
									<span :style="!item.isTrue ? 'color: red;' : 'color: green;'">{{ item.stuAnswer == 1 ? '√' : '×' }}</span>
								</template>
							</template>
							
							<template v-if="!item.isTrue">
								<div style="top: 0;position: absolute; right: 50px;color: green;">
									正确答案: 
								  <template v-if="item.type !== 3">
									  <span v-for="item in item.testAnswer" :key="item">{{ xuanxiang[(item - 1)] }}</span>
								  </template>
								  <template v-else>
									  <span>{{ item.testAnswer == 1 ? '√' : '×' }}</span>
								  </template>
								</div>
							</template>
						</div>
					</div>
				</div>
			</div>
			
			
			<div style="padding: 0 20rpx;">
				
				{{ role == '1' ? "我的" : "学生" }}成绩: {{ score }} 分 
			</div>
		</div>
	</div>

		
</template>

<script>
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 9999,
				workId: "",
				workName: "",
				stu_list: [

				],
				status_list: ['未读', '未完成', '已完成'],
				// testPreview: [],
				xuanxiang: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
				testPreview: [],
				score: 0,
				stuId: "",
				role: "1",
				// 作业状态（1：未读；2：未完成；3：已完成
				testDetail: null
			}
		},
		onLoad(option) {
			this.workId = option.workId;
			this.workName = option.workName;
			if(option.stuId) {
				this.stuId = option.stuId;
				this.getWorkDetailTea();
				this.role = "2";
			} else {
				this.getWorkScoreListTea();
				this.getWorkDetailStu();
			}
		},
		created() {
		},
		methods: {
			handleChange() {
				console.log(this.termWorkName);
			},
			
			getWorkDetailTea() {
				const {
					workId,
					stuId
				} = this;
				this.pyReq(this.$http.getWorkDetailTea, {
					workId,
					stuId
				}, (res) => {
					const { score, testDetail } = res.result;
					this.score = score || 0;
					this.testPreview = (testDetail || []).map(item => {
						var str1 = null;
						var str2 = null;
						var option = [];
						if(typeof item.choose == "string") {
							option = (item.choose || "").split("##").filter(item => item);
						} else {
							option = item.choose || [];
						}
						if(item.stuAnswer) {
							str1 = (item.stuAnswer || []).map(item => item - 0).sort().join("");
						}
						if(item.right) {
							str2 = (item.right || []).map(item => item - 0).sort().join("");
						}
						var stuAnswer = "";
						if(item.type == 1 && item.stuAnswer) {
							stuAnswer = item.stuAnswer[0] - 0;
						}
						if(item.type == 2 && item.stuAnswer) {
							stuAnswer = item.stuAnswer.map(item => item - 0).sort();
						}
						if(item.type == 3 && item.stuAnswer) {
							stuAnswer = item.stuAnswer[0];
						}
						return {
							...item,
							choose: option,
							isTrue: str1 == str2,
							testAnswer: item.right.map(item => item - 0).sort(),
							stuAnswer: stuAnswer || item.stuAnswer,
						};
					});
				});
			},
			getWorkDetailStu() {
				const {
					workId
				} = this;
				this.pyReq(this.$http.getWorkDetailStu, {
					workId,
				}, (res) => {
					const { score, testDetail } = res.result;
					this.score = score || 0;
					this.testDetail = testDetail;
					console.log(testDetail);
				});
			},
			getWorkScoreListTea() {
				const {
					pageNo,
					pageSize,
					workId
				} = this;
				this.pyReq(this.$http.getWorkTestDetailStu, {
					pageNo,
					pageSize,
					workId,
				}, (res) => {
					if (res.code == 0) {
						this.testPreview = (res.result.records || []).map(item => {
							var str1 = null;
							var str2 = null;
							if(item.stuAnswer) {
								str1 = item.stuAnswer.map(item => item - 0).sort().join("");
							}
							if(item.testAnswer) {
								str2 = item.testAnswer.map(item => item - 0).sort().join("");
							}
							var stuAnswer = "";
				
							if(item.type == 1 && item.stuAnswer) {
								stuAnswer = item.stuAnswer[0] - 0;
							}
							if(item.type == 2 && item.stuAnswer) {
								stuAnswer = item.stuAnswer.map(item => item - 0).sort();
							}
							if(item.type == 3 && item.stuAnswer) {
								stuAnswer = item.stuAnswer[0];
							}
							return {
								...item,
								isTrue: str1 == str2,
								stuAnswer: stuAnswer || item.stuAnswer,
							};
						});
					}
				});
			}
		},
	}
</script>

<style>
	.exam-item {
		position: relative;
		margin-bottom: 20rpx;
	}
	.exam-item::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -20rpx;
		transform: translateX(-50%);
		height: 1px;
		background-color: #eee;
		width: 50%;
	}
	.exam-item-line {
		display: flex;
		margin-bottom: 10rpx;
	}
	.exam-item-left {
		width: 90rpx;
		text-align: right;
	}
	.exam-item-right {
		flex: 1;
		margin-left: 10rpx;
		position: relative;
	}
	.exam-list {
		padding: 0 10rpx;
	}
</style>
